import React from 'react';
import { Tree, Card, Badge, Input } from 'antd';
import {
    CodepenOutlined,
    SettingOutlined,
    FileOutlined,
    ShareAltOutlined,
} from '@ant-design/icons';
import { connect } from 'umi';

const { Search } = Input;
class JobTree extends React.Component<any, any> {
    constructor(props: any) {
        super(props);
        this.state = {
            loading: false,
            visible: false,
            treeData: [],
            selectedNode: {},
        }
    }
    componentDidMount() {
        this.props.onRef(this)
    }
    fetchData = (BomData: any, JobData: any) => {
        if (BomData && BomData.boms) {
            var treeData: any = []
            var node = {
                title: JobData.jobNum,
                subTitle: JobData.jobNum,
                key: JobData.id,
                item: JobData,
                icon: <CodepenOutlined />,
                type: 'root',
                children: this.mapData(BomData, '')
            }
            treeData.push(node)
            this.setState({ treeData })
        }
    }
    mapData = (BomData: any, parent: string = '') => {
        var treeData: any = []
        var asmbls = BomData.boms.filter((o: any) => o.parent === parent);
        asmbls.forEach((item: any) => {
            var boos = BomData.boos.filter((o: any) =>
                o.partNum === item.partNum
                && o.revisionNum === item.revisionNum);
            var booNodes = this.mapBooData(BomData, boos)
            var childNodes = this.mapData(BomData, item.partNum)
            var children: any = []
            booNodes.forEach((boo: any) => {
                children.push(boo)
            });
            childNodes.forEach((asmbl: any) => {
                children.push(asmbl)
            });
            var node = {
                title: item.assemblySeq + '-' + item.partNum + item.partDescription,
                subTitle: item.assemblySeq + '-' + item.partNum + item.partDescription,
                key: item.id,
                item,
                icon: <CodepenOutlined />,
                type: 'asm',
                children
            }
            treeData.push(node)
        });

        return treeData;
    }
    mapBooData = (BomData: any, boos: any) => {
        var treeData2: any = []
        boos.map((item: any) => {
            var mtls = BomData.mtls.filter((o: any) =>
                o.assemblySeq === item.assemblySeq
                && o.relatedOperation === item.oprSeq);
            var node = {
                title: <span>{item.oprSeq + "-" + item.opDesc} {item.opComplete ? <Badge status="success" /> : ''}</span>,
                subTitle: item.oprSeq + "-" + item.opDesc,
                key: item.id,
                item: item,
                icon: item.subContract ? <ShareAltOutlined /> : <SettingOutlined />,
                type: 'boo',
                children: this.mapMtlData(mtls)
            }
            treeData2.push(node)
        });
        return treeData2;
    }
    mapMtlData = (mtls: any) => {
        var treeData3: any = []
        mtls.map((item: any) => {
            var node = {
                title: <span>{item.mtlSeq + '-' + item.partNum + item.partDescription} {item.issuedComplete ? <Badge status="success" /> : ''}</span>,
                subTitle: item.mtlSeq + '-' + item.partNum + item.partDescription,
                key: item.id,
                item,
                icon: <FileOutlined />,
                type: 'mtl',
            }
            treeData3.push(node)
        });
        return treeData3;
    }
    clearData = () => {
        console.log("clearData");
        this.setState({ treeData: [] })
    }

    render() {
        const { treeData, searchValue, autoExpandParent, expandedKeys } = this.state;
        const onExpand = (expandedKeys: any) => {
            this.setState({
                expandedKeys,
                autoExpandParent: false,
            });
        };

        const onCheck = (checkedKeys: any) => {
            //console.log('onCheck', checkedKeys);
        };

        const onSelect = (selectedKeys: any, info: any) => {
            if (this.props.setCurrentAsmb) {
                this.props.setCurrentAsmb(info.node.item, info.node.type, info.node)
            }
            this.setState({ selectedNode: info.node })
        };
        const getParentKey = (value: any, tree: any, expandedKeys: any = []) => {
            tree.map((item: any) => {
                if (item.subTitle.indexOf(value) > -1) {
                    expandedKeys.push(item.key);
                }
                if (item.children) {
                    getParentKey(value, item.children, expandedKeys);
                }
            })
        };
        const onSearch = (e: any) => {
            const { value } = e.target;
            if (!value || value === '') {
                return;
            }
            const { treeData } = this.state
            const expandedKeys: any = []

            treeData[0].children.map((item: any) => {
                if (item.subTitle.indexOf(value) > -1) {
                    expandedKeys.push(item.key);
                }
                if (item.children) {
                    getParentKey(value, item.children, expandedKeys);
                }
            })
            this.setState({
                expandedKeys,
                searchValue: value,
                autoExpandParent: true,
            });
        };
        return (
            <Card title="制造工艺">
                <Search style={{ marginBottom: 8 }} placeholder="Search" onChange={onSearch} />
                <Tree
                    showIcon
                    checkable={false}
                    draggable
                    defaultExpandAll
                    onExpand={onExpand}
                    onCheck={onCheck}
                    onSelect={onSelect}
                    treeData={treeData}
                    autoExpandParent={autoExpandParent}
                    expandedKeys={expandedKeys}
                />
            </Card>
        );
    }
}

export default connect(({ Abp }: API.IConnectState) => ({
    response: Abp.response,
    currentUser: Abp.currentUser,
}))(JobTree);